<template>
  <el-container>
    <el-main>
      <el-button size="small" type="primary" icon="el-icon-search" @click="change">改变</el-button>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>男女比例</b></span>
            </div>
            <div class="echarts">
              <div id="mychart_sex" style="width: 580px; height: 400px"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>年龄分布</b></span>
            </div>
            <div class="echarts">
              <div id="mychart_age" style="width: 580px; height: 400px"></div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>国籍分布</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_nationality"
                style=" height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>政治面貌分布</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_politicalFace"
                style="width: 580px; height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>登录周期</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_internal"
                style="height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>消费能力分析</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_consumeAbility"
                style="height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>地区分布</b></span>
            </div>
            <div class="echarts">
              <div id="mychart_area" style=" height: 400px"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>地区消费能力</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_area_pay"
                style=" height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>职业消费能力</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_job_pay"
                style=" height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>群体品类偏好</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_prefer_type"
                style=" height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>浏览时长</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_time_len"
                style=" height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>浏览时段</b></span>
            </div>
            <div class="echarts">
              <div
                id="mychart_time_area"
                style=" height: 400px"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // data_sex:[],
      // data_age:[],
      group_sex: [
        { value: 41, name: "男" },
        { value: 52, name: "女" },
      ],
    };
  },

  mounted() {
    let that = this;
    that.getchart();
    this.$axios.get("/api/group/profile").then((res) => {
      console.log(res.data.sex);
      that.group_sex = res.data.sex;
      // that.getchart();
    });
  },

  created() {

  },

  methods: {
    change(){
      this.group_sex=[
        { value: 20, name: "男" },
        { value: 52, name: "女" },
      ]
      this.getchart()
    },

    getchart() {
      var option_sex = {
        title: {
          text: "群体男女比例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: this.group_sex,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      var option_age = {
        title: {
          text: "年龄分布",
          left: "center",
          top: "top",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "50后",
            "60后",
            "70后",
            "80后",
            "90后",
            "00后",
            "10后",
            "20后",
          ],
        },

        series: [
          {
            name: "漏斗图",
            type: "funnel",
            width: "40%",
            height: "70%",
            left: "25%",
            top: "20%",
            funnelAlign: "right",

            center: ["50%", "50%"], // for pie

            data: [
              { value: 1, name: "50后" },
              { value: 1, name: "60后" },
              { value: 22, name: "70后" },
              { value: 24, name: "80后" },
              { value: 25, name: "90后" },
              { value: 22, name: "00后" },
              { value: 1, name: "10后" },
              { value: 1, name: "20后" },
            ],
          },
        ],
      };
      var option_politicalFace = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 32, name: "党员" },
              { value: 29, name: "群众" },
              { value: 31, name: "无党派人士" },
            ],
          },
        ],
      };
      var option_nationality = {
        xAxis: {
          type: "category",
          data: ["中国大陆", "中国台湾", "中国澳门", "中国台湾", "其他"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [93, 0, 0, 0, 0],
            type: "line",
          },
        ],
      };
      var option_internal = {
        xAxis: {
          type: "category",
          data: ["7日", "1月", "2周", "2月", "3月", "4月", "5月", "6月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [0.0, 0, 0, 0, 1, 5, 0],
            type: "line",
            symbol: "triangle",
            symbolSize: 20,
            lineStyle: {
              color: "#5470C6",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#EE6666",
              color: "yellow",
            },
          },
        ],
      };
      var option_consumeAbility = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },

        legend: {
          data: ["超高", "高", "中", "中上", "中下", "低", "很低"],
        },

        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            top: 60,
            //x2: 80,
            bottom: 60,
            width: "80%",
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 0, name: "中" },
              { value: 1, name: "中上" },
              { value: 1, name: "中下" },
              { value: 2, name: "低" },
              { value: 0, name: "很低" },
              { value: 65, name: "超高" },
              { value: 24, name: "高" },
            ],
          },
        ],
      };
    
    // 性别
      var mychart_sex = this.$echarts.init(
        document.getElementById("mychart_sex")
      );
      mychart_sex.setOption(option_sex);

    // 年龄
      var mychart_age = this.$echarts.init(
        document.getElementById("mychart_age")
      );
      mychart_age.setOption(option_age);

    // 政治面貌
      var mychart_politicalFace = this.$echarts.init(
        document.getElementById("mychart_politicalFace")
      );
      mychart_politicalFace.setOption(option_politicalFace);

    // 国籍
      var mychart_nationality = this.$echarts.init(
        document.getElementById("mychart_nationality")
      );
      mychart_nationality.setOption(option_nationality);

    // 登录周期
      var mychart_internal = this.$echarts.init(
        document.getElementById("mychart_internal")
      );
      mychart_internal.setOption(option_internal);

    // 消费能力
      var mychart_consumeAbility = this.$echarts.init(
        document.getElementById("mychart_consumeAbility")
      );
      mychart_consumeAbility.setOption(option_consumeAbility);
    },
  },
};
</script>

<style scoped>
/* .el-row {
  margin: 10px auto;
} */
.box-card3 {
  width: 500px;
  border-radius: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>